<template>
	<view class="content">
		<view class="divider">
			<u-divider text="关于我们" textColor="#69a794" lineColor="#45b787"></u-divider>
		</view>
		<view class="aboutAuthorText">
			<text class="author">作者:{{author}}</text>
			<view class="jianshao">
				{{content}}
			</view>
		</view>
		<view class="fg">
			<u--text :text="text" prefixIcon="star-fill" :iconStyle="{
				color:'red'
			}"></u--text>
			<u-rate :count="count" v-model="value" activeIcon="heart-fill" inactiveIcon="heart" :allowHalf="allowHalf"
				:minCount="1" class="rate"></u-rate>
		</view>
		<view class="submit">
			<u-button text="提交评分" shape="circle" :loading="loading" color="#1ba784" @click="submit()"></u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				author: "大地守护者唐志峰",
				content: "作者是来自萍乡学院2101软件工程的学生,目前功能还在开发中!!!!!!",
				count: 5,
				value: 0,
				allowHalf: true,
				text: "可在下方对我们给与我们评分:",
				loading: false,
				showToasts: [{
					type: 'success',
					title: '成功主题(带图标)',
					message: "感谢亲的反馈",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
				}, {
					type: 'error',
					icon: false,
					title: '失败主题',
					message: "亲,评分不能为0,^_^",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
				}],
				type: "反馈"
			}
		},
		methods: {
			submit() {
				//提交之前判断分数是否大于1
				if (this.value <= 0) {
					this.showToast(this.showToasts[1]);
					return;
				}
				this.showToast(this.showToasts[0]);
				//提交分数至后台,不需要token验证,采用路径参数
				this.$request("/rate/save", "POST", {
					value: this.value,
					type: this.type
				}, {
					"content-type": "application/json"
				}).then(res => {
					console.log(res.data.code)
				}).catch(error => {
					console.log("保存失败:" + error.data.message);
				})
			},
			showToast(params) {
				this.$refs.uToast.show({
					...params,

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.aboutAuthorText {
		margin-left: 3%;
	}

	.fg {
		margin-top: 10%;
		margin-left: 3%;

		.rate {
			margin-top: 3%;
			margin-left: 5%;
		}
	}

	.submit {
		margin-top: 5%;
		padding: 0% 15%;
	}
</style>